white - space
|
|
|
|
|
|
|||||||||
|
6.0 |
7.0 |
8.0 |
8.0 |
9.0 |
8.0 |
9.2 |
9.5 |
1.3 |
2.0 |
3.1 |
1.5 |
2.0 |
3.0 |
|
Частий. |
Частий. |
Так |
Частий. |
Частий. |
Частий. |
Частий. |
Так |
Так |
Так |
Так |
Частий. |
Частий. |
Так |
Частий. - підтримується частково.
Коротка
інформація
|
CSS |
CSS1,
CSS2 |
|
Значення за умовчанням |
normal |
|
Наслідує |
Так |
|
Застосовується |
До
блокових елементів |
|
Аналог HTML |
<PRE>,
<NOBR> |
|
Посилання на специфікацію |
http://www.w
3.org/TR/CSS21/text.html#propdef - white - space |
Опис
Властивість
white - space встановлює, як відображати пропуски між словами. У звичайних
умовах будь-яка кількість пропусків в коді HTML показується на веб-сторінці як
один. Виключенням є тег <PRE>, поміщений в цей контейнер текст виводиться
з усіма пропусками, як він відформатував користувачем. Таким чином, white -
space імітує роботу тега <PRE>, але на відміну від нього не міняє шрифт
на моноширинний.
Синтаксис
white
- space: normal | nowrap | pre | pre - line | pre - wrap | inherit
Значення
normal
Текст у вікні браузеру виводиться як завжди, перенесення
рядків встановлюються автоматично.
nowrap
Пропуски не враховуються, перенесення рядків в коді HTML
ігноруються, увесь текст відображається одним рядком; в той же час, додавання
тега <BR> переносить текст на новий рядок.
pre
Текст показується з урахуванням усіх пропусків і
перенесень, як вони були додані розробником в коді HTML. Якщо рядок виходить
занадто довгим і не поміщається у вікні браузеру, то буде додана горизонтальна
смуга прокрутки.
pre - line
У тексті пропуски і перенесення не враховуються, текст
автоматично переноситься на наступний рядок, якщо він не поміщається в задану
область.
pre - wrap
У тексті зберігаються усі пропуски і перенесення, проте
якщо рядок по ширині не поміщається в задану область, то текст автоматично буде
перенесений на наступний рядок.
inherit
Наслідує значення батька.
Приклад
HTML 4.0
CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http ://www.w 3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows - 1251"> <title>white - space</title> <style type="text/css"> P.example { border: 1px dashed #634f36; /* Параметрів рамки */ background: #fffff5; /* Колір фону */ font - family: "Courier New", Courier, monospace; /* Сімейство шрифту */ padding: 7px; /* Полів навколо тексту */ margin: 0px 0px 1em; /* Відступів */ white - space: pre; /* Враховуються усі пропуски і перенесення */ } P.exampleTitle { border: 1px solid black; /* Параметрів рамки */ border - bottom: none; /* Прибираємо лінію знизу */ padding: 3px; /* Полів навколо тексту */ display: inline; /* Відображати як вбудований елемент */ background: #efecdf; /* Колір фону */ font - weight: bold; /* Жирне зображення */ font - size: 90%; /* Розмір шрифту */ margin: 0px; /* Прибираємо відступи */ white - space: nowrap; /* Перенесень в тексті немає */ } </style> </head> <body> <p class="exampleTitle">Приклад</p> <p class="example"> <html> <body> <b>Велика теорема Ферма</b><br> <i>X <sup><small>n</small></sup> + Y <sup><small>n</small></sup> = Z <sup><small>n</small></sup></i><br> де n - ціле число > 2 lt;/body> </html> </p> </body></html>
Результат
цього прикладу показаний ні мал. 1.
Мал. 1. Застосування властивості white - space
Об'єктна модель
[window.]document.getElementById("elementID").style.whiteSpace
Браузери
Браузер
Internet Explorer до сьомої версії включно не підтримує значення pre - line,
pre - wrap і inherit. Для <TEXTAREA> значення normal і pre поводяться як
pre - wrap, а значення nowrap поводиться як pre - line.
Firefox
до версії 2.0 включно не підтримує значення pre - line і pre - wrap. Для
<TEXTAREA> значення normal, nowrap, і pre сприймаються як pre - wrap.
Opera
до версії 9.2 не підтримує значення pre - line. Для <TEXTAREA> значення
normal і pre поводяться як pre - wrap, а значення nowrap поводиться як pre -
line.
